<template>
  <div class="page-content"
       ref="node"
       id="allPage">
    <div v-wechat-title="$route.meta.title"></div>
    <div class="qr-code-default">
      <div class="container"
           id="code">
        <canvas id="QRCode"></canvas>
      </div>
      <div class="page-text">

        <p class="item">
          <span class="title">单位名称 :</span>
          <span class="content">{{dwmc}}</span>
        </p>
        <p class="item">
          <span class="title">单位地址 :</span>
          <span class="content">{{dwdz}}</span>
        </p>
      </div>
      <mt-button data-html2canvas-ignore
                 type="primary"
                 disabled
                 class="qr-code addcard"
                 size="small"
                 @click="Download()">长按图片保存二维码</mt-button>
    </div>

    <!--生成的图片的存放容器-->
    <div class="shareImg"
         id="shareImg"
         style=""></div>
  </div>
</template>
<script>
import QRCode from "qrcode";
import html2canvas from "html2canvas";

export default {
  data () {
    return {
        dwmc: sessionStorage.getItem("companyInfo")!=null ? JSON.parse(sessionStorage.getItem("companyInfo")).dwmc:'',
        dwdz:sessionStorage.getItem("companyInfo")!=null ? JSON.parse(sessionStorage.getItem("companyInfo")).dwdz:'',
    };
  },
  watch: {
  },
  methods: {
    getUrl (xxx) {

      var canvas = document.getElementById("QRCode"); //获取到canvas

      var code = document.getElementById("code");   //获取到code容器

      QRCode.toCanvas(canvas, xxx, error => {

        if (error) console.error(error);

        console.log("success!");

      });

      var image = new Image();     //实例一个img

      image.src = canvas.toDataURL("image/png");  //转换成base64格式路径的png图片 

      image.style.width = "100%";    //设置样式
      image.style.borderRadius = "10px";

      code.appendChild(image);     //添加到code 容器中

      canvas.style.display = "none";   //隐藏掉canvas  

    },

    getDpr: function () {
      if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
      }
      return 1;
    },

    /**
     * 将传入值转为整数
     * @param value
     * @returns {number}
     */
    parseValue: function (value) {
      return parseInt(value, 10);
    },
    /**
     * 生成图片
     */
    generateImage: function () {
      var _this = this;
      // 获取想要转换的dom节点
      // var dom = document.querySelector('body');
      var dom = document.getElementById('allPage');
      var box = window.getComputedStyle(dom);
      // dom节点计算后宽高
      var width = _this.parseValue(box.width);
      var height = _this.parseValue(box.height);

      // 获取像素比
      var scaleBy = _this.getDpr();

      // 创建自定义的canvas元素
      var canvas = document.createElement('canvas');

      // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
      canvas.width = width * scaleBy;
      canvas.height = height * scaleBy;

      // 设置canvas css 宽高为DOM节点宽高
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';

      // 获取画笔
      var context = canvas.getContext('2d');

      // 将所有绘制内容放大像素比倍
      context.scale(scaleBy, scaleBy);

      // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
      var w = this.$refs.node.offsetWidth;
      var h = this.$refs.node.offsetHeight;

      html2canvas(dom, {
        allowTaint: true,
        width: w,
        height: h,
        useCORS: true
      }).then(function (canvas) {
        _this.$refs.node.style.backgroundColor = "#fff";
        // 将canvas转换成图片渲染到页面上
        var url = canvas.toDataURL('image/png');// base64数据
        var image = new Image();
        image.src = url;
        document.getElementById('shareImg').appendChild(image);

      });
    }
  },
  mounted () {
    let QRCodeMsg = this.$public.getLocalhostPath() + "/visitorRegister"; //生成的二维码为URL地址
    this.getUrl(QRCodeMsg);
    this.$nextTick(function () {
      this.generateImage();
    });
  },

  components: { QRCode }
};
</script>
<style lang="stylus" scoped>
.page-content
  width 100vw
  height 100vh
  background #fff
  text-align center
  /* margin: 0; */
  position fixed
  .qr-code-default
    margin 80px 30px
    padding 45px 20px
    .container
      border 1px solid #d8d8d8
      border-radius 10px
      #QRCode
        height 100% !important
        width 100% !important
        border-radius 10px
    .qr-code
      font-size 14px
      height 33px
      width 100%
      margin-top 20px
img
  border-radius 10px
.shareImg
  z-index 6
  opacity 0
  position absolute
  top 0
  width 100%
  height 100%
.page-text
  margin-top 20px
  margin-bottom 20px
  .item
    margin-top 10px
    font-size 14px
    color #000
    text-align left
</style>